<style rel="stylesheet/scss" lang="scss" scoped>

.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
  color: #347DE1
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: #F7F9FA;
  border: 1px solid #347DE1;
  border-radius: 8px;
}
</style>

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="goTaskDef">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content" style="font-size: 15px;">定时任务定义详情</div>
        </div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="任务定义详情" name="first">
          <el-form ref="taskForm" :model="taskForm" label-position="left" label-width="200px">
            <el-row>
              <el-col :span="15">
                <el-form-item label="任务编码" prop="taskCode" style="padding-right: 20%">
                  <el-input v-model="taskForm.taskCode" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">唯一编码，任务编码</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="任务名称" prop="taskName" style="padding-right: 20%">
                  <el-input v-model="taskForm.taskName" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">唯一编码，任务名称</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="15">
                <el-form-item label="shell文件" prop="shellPath" style="padding-right: 20%">
                  <el-input v-model="taskForm.shellPath" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">shell脚本路径</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="外部参数" style="padding-right: 20%">
                  <el-input v-model="taskForm.extParam" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">shell脚本参数</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="Cron表达式" style="padding-right: 20%">
                  <el-input v-model="taskForm.cronExpress" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">Cron表达式。</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="15">
                <el-form-item style="padding-right: 20%" label="是否限定生效日期范围" prop="isValidDate">
                  <el-switch v-model="taskForm.isValidDate"
                             active-value="1"
                             inactive-value="2" disabled></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">是否限制任务的生效时间范围</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="taskForm.isValidDate==1">
              <el-col :span="15">
                <el-form-item style="padding-right: 20%" label="日期范围" prop="startEndDate">
                  <el-date-picker
                    disabled
                    v-model="taskForm.startEndDate"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">任务的生效时间范围</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="指定节点编码" style="padding-right: 20%">
                  <el-select v-model="taskForm.appointAgentCode" disabled placeholder="请选择">
                    <el-option
                      v-for="item in agentCodeOption"
                      :key="item.agentCode"
                      :label="item.agentName"
                      :value="item.agentCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">唯一编码，执行任务的节点编码</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="资源数" style="padding-right: 20%">
                  <el-input-number v-model="taskForm.resNum" :disabled="true" :min="1" :max="100"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">任务所占资源数，默认为5，特殊大作业增大数值</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="预计执行时长(秒)" style="padding-right: 20%">
                  <el-input-number v-model="taskForm.planExecDuration" :disabled="true" :min="0"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">预估任务的执行时间</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="超时时长(秒)" style="padding-right: 20%">
                  <el-input-number v-model="taskForm.overPlanDuration" :disabled="true" :min="0"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">允许任务超时最大时长</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="任务描述" style="padding-right: 20%">
                  <el-input v-model="taskForm.taskDesc" :disabled="true" type="textarea"
                            style="width: 100%;" :autosize="{ minRows: 2, maxRows: 5}"
                            placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">任务的描述，不可超过60个字</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)"
                     data-status="off"></i>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="任务实例列表" name="second">
          <!--工具栏-->
          <div class="head-container" style="margin-top: 10px">
            <crudOperation :defaultQueryForm="defaultQueryForm" :moreQueryList="moreQueryList"/>
          </div>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data"
                    style="width: 100%;" @select="crud.selectChange"
                    @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
                    @filter-change="crud.handleFilterChange"
                    :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
            <el-table-column type="selection" width="55"/>
            <el-table-column v-if="columns.visible('taskCode')" :show-overflow-tooltip="true"
                             prop="taskCode" label="任务编码"/>
            <el-table-column v-if="columns.visible('taskName')" :show-overflow-tooltip="true"
                             prop="taskName" label="任务名称"/>
            <el-table-column v-if="columns.visible('cronExpress')" :show-overflow-tooltip="true"
                             min-width="100" prop="cronExpress" label="CRON表达式"/>
            <el-table-column v-if="columns.visible('execStTs')" :show-overflow-tooltip="true"
                             min-width="160" prop="execStTs"
                             label="执行开始时间"/>
            <el-table-column v-if="columns.visible('execEndTs')" :show-overflow-tooltip="true"
                             min-width="160" prop="execEndTs"
                             label="执行结束时间"/>
            <el-table-column v-if="columns.visible('costTs')" :show-overflow-tooltip="true" prop="costTs"
                             label="耗时(秒)"/>
            <el-table-column v-if="columns.visible('batchTag')" :show-overflow-tooltip="true"
                             prop="batchTag" label="批次标签">
              <template slot-scope="scope">
                <el-tag size="medium" type="success"
                        v-if="scope.row.batchTag!=''&& scope.row.batchTag != null">
                  {{ formatterBatchTag(scope.row.batchTag) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('execStatus')" prop="execStatus" label="执行状态 "
                             min-width="100" key="execStatus"
                             :filters="cronexecStatusDict"
                             :filter-method="filterExecStatus" filter-placement="bottom-end"
                             :filter-multiple="false" column-key="execStatus">
              <template slot-scope="scope">
                <el-tag size="medium" :type="formatterExecStatusType(scope.row.execStatus)">
                  {{ formatterExecStatus(scope.row.execStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="执行失败原因" v-if="columns.visible('execFailReason')" prop="execFailReason">
              <template slot-scope="scope">
                <el-button @click="lookErrorInf(scope.row)" v-if="'2' == scope.row.execStatus"
                           type="text" size="small">查看原因
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog title="失败原因" :visible.sync="dialogVisible" width="30%">
      <div style="max-height: 300px;overflow-y: auto">{{ errorInf }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import cronTaskApi from '@/api/cronTask/cronTask'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/components/CRUD.OnlyLookOperation'
import cronTaskDefApi from '@/api/cronTask/cronTaskDef'
import appApi from '@/api/app/appInf'

const queryList = [{
  'cloumValue': 'taskCode',
  'cloumName': '任务编码'
}, {
  'cloumValue': 'taskName',
  'cloumName': '任务名称'
}, {
  'cloumValue': 'batchTag',
  'cloumName': '批次标签'
}]
const defaultCrud = CRUD({
  title: '任务实例详情',
  queryList: queryList,
  url: '/api/cronTask',
  queryOnPresenterCreated: false,
  sort: 'sort,asc',
  crudMethod: {
    ...cronTaskApi
  }
})
const defaultForm = {}
const tableColumnOptions = ['任务编码', '任务名称', 'CRON表达式', '执行开始时间', '执行结束时间', '耗时(秒)', '批次标签', '执行状态', '执行失败原因']
export default {
  name: 'cronTaskDetail',
  components: {
    crudOperation
  },
  props: {
    goBack: {
      type: Function,
      default: null
    },
    taskCode: ''
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  filters: {
    formatTime: function (value) {
      if (value != '') {
        return value.slice(0, 19).replace('T', ' ')
      }
    }
  },
  dicts: ['exec_status'],
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      errorInf: '',
      agentCodeOption: [],
      taskForm: {taskStDate: null, taskEndDate: null},
      defaultQueryForm: {taskCode: null, execStatus: '', startTime: [], endTime: []},
      moreQueryList: [
        {
          cloumLable: 'execStatus', name: '处理状态', type: 'radio', placeholder: '', defaultValue: null, radioList: [
            {label: '', value: '全部'},
            {label: '3', value: '处理中'},
            {label: '2', value: '处理失败'},
            {label: '1', value: '处理成功'}
          ]
        },
        {
          cloumLable: 'startTime',
          cloumLableType: 'startTimeType',
          name: '执行开始时间',
          type: 'timeFramePicker',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'endTime',
          cloumLableType: 'endTimeType',
          name: '执行结束时间',
          type: 'timeFramePicker',
          placeholder: '',
          defaultValue: null
        }
      ],
      cronexecDict: [],
      cronexecStatusDict: []
    }
  },
  computed: {},
  created() {
    this.initAgentCodes()
    this.initQry()
    this.cronexecDict = this.dict.exec_status
  },
  watch: {
    cronexecDict() {
      this.$nextTick(() => {
        this.cronexecDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.cronexecStatusDict.push(obj)
        })
      })
    }
  },
  methods: {
    initQry() {
      this.crud.params.taskCode = this.taskCode
      this.defaultQueryForm.taskCode = this.taskCode
      this.getTaskInfByTaskCode(this.taskCode)
      this.crud.toQuery()
    },
    initAgentCodes() {
      appApi.findNodeByCurrentApp()
        .then(res => {
          const agentList = []
          if (res) {
            res.forEach(item => {
              const index = agentList.some(value => value.agentCode == item.agentCode)
              if (!index) {
                agentList.push(item)
              }
            })
          }
          this.agentCodeOption = agentList
        })
    },
    getTaskInfByTaskCode(taskCode) {
      cronTaskDefApi.queryByTaskCode(taskCode).then(res => {
        this.taskForm = res
        if (this.taskForm.taskStDate != null && this.taskForm.taskStDate != '' && this.taskForm.taskEndDate != null
          && this.taskForm.taskEndDate != '') {
          this.$set(this.taskForm, 'startEndDate', [this.taskForm.taskStDate, this.taskForm.taskEndDate])
        }
      })
    },
    goTaskDef() {
      this.goBack()
    },
    formatterBatchTag(val) {
      return val
    },
    filterExecStatus(value, row) {
      return row.execStatus === value
    },
    lookErrorInf(data) {
      this.errorInf = data.execFailReason
      this.dialogVisible = true
    },
    /*点击显示提示信息*/
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status')
      let previousNode = e.target.previousElementSibling
      if ('off' == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show')
        e.target.setAttribute('data-status', 'on')
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content')
        e.target.setAttribute('data-status', 'off')
      }
    },
    formatterExecStatusType(val) {
      const type = ['', 'success', 'warning', 'primary', 'info', 'danger']
      return type[val]
    },
    formatterExecStatus(val) {
      return this.dict.label.exec_status[val]
    }
  }
}
</script>
